<template>
    <div>
        <a-row :gutter="20">
            <a-col class="gutter-row" :span="12">
                <div style="width:100%">
                    <img
                            src="https://sqimg.qq.com/qq_product_operations/im/2015/update/avds.jpg"
                    />
                </div>
            </a-col>
            <a-col class="gutter-row" :span="12">
                <a-card title="" id="card">
                    <!-- 顶部tabs开始 -->
                    <a-tabs
                            defaultActiveKey="login-member"
                            v-model="activeKey"
                            tabPosition="top"
                    >
                        <!-- 登录开始 -->
                        <a-tab-pane tab="会员登录" key="login-member">
                            <!-- 登录tab的内tab -->
                            <a-tabs defaultActiveKey="pwd-login" tabPosition="left">
                                <!-- 密码登录 -->
                                <a-tab-pane tab="密码登录" key="pwd-login">
                                    <a-form
                                            id="components-form-demo-normal-login"
                                            :form="formLoginMember"
                                            class="login-form"
                                            @submit="submitPwdLogin"
                                    >
                                        <a-form-item>
                                            <a-input
                                                    v-decorator="[
                          'account',
                          {
                            rules: [
                              { required: true, message: '请输入账户!' }
                            ]
                          }
                        ]"
                                                    placeholder="会员名/手机号/邮箱"
                                            >
                                                <a-icon
                                                        slot="prefix"
                                                        type="user"
                                                        style="color: rgba(0,0,0,.25)"
                                                />
                                            </a-input>
                                        </a-form-item>
                                        <a-form-item>
                                            <a-input
                                                    v-decorator="[
                          'password',
                          {
                            rules: [
                              { required: true, message: '请输入您的密码!' }
                            ]
                          }
                        ]"
                                                    type="password"
                                                    placeholder="密码"
                                            >
                                                <a-icon
                                                        slot="prefix"
                                                        type="lock"
                                                        style="color: rgba(0,0,0,.25)"
                                                />
                                            </a-input>
                                        </a-form-item>
                                        <a-form-item>
                                            <a-input
                                                    v-decorator="[
                          'code',
                          {
                            rules: [
                              { required: true, message: '请输入验证码!' }
                            ]
                          }
                        ]"
                                                    type="text"
                                                    placeholder="验证码"
                                            >
                                                <a-icon
                                                        slot="prefix"
                                                        type="lock"
                                                        style="color: rgba(0,0,0,.25)"
                                                />
                                            </a-input>
                                            <div style="text-align:center">
                                                <img :src="imageSrc" alt="验证码" style=" margin-top:13px"
                                                     onclick="this.src=this.src+'?'+new Date()*1"/>
                                            </div>
                                        </a-form-item>

                                        <a-form-item>
                                            <a-button type="link" @click="forgetPass"
                                            >忘记密码
                                            </a-button>
                                            <a href="/member-register"
                                            >没有账号？点击注册</a>
                                            <a-button
                                                    type="primary"
                                                    html-type="submit"
                                                    class="login-form-button"
                                            >登录
                                            </a-button>
                                        </a-form-item>
                                    </a-form>
                                </a-tab-pane>
                                <!--短信登录-->
                                <a-tab-pane tab="短信登录" key="mobile-login">
                                    <a-form
                                            :form="formLoginMobile"
                                            class="login-form"
                                            @submit="submitMobileLogin"
                                    >
                                        <a-form-item>
                                            <a-input
                                                    v-decorator="[
                                                          'account',
                                                          {
                                                            rules: [
                                                              { required: true, message: '请输入手机号!' }
                                                            ]
                                                          }
                                                        ]"
                                                    placeholder="手机号"
                                            >
                                                <a-icon
                                                        slot="prefix"
                                                        type="user"
                                                        style="color: rgba(0,0,0,.25)"
                                                />
                                            </a-input>
                                        </a-form-item>

                                        <a-form-item v-bind="formItemLayout">
                                            <a-input
                                                    v-decorator="[ 'code',{ rules: [{ required: true, message: '请输入验证码!' }],}  ]"
                                                    style="width: 100%;display: inline-block"
                                                    @blur="handleCodeBlur"
                                                    placeholder="短信验证码"
                                            ></a-input>
                                            <a-button
                                                    type="link"
                                                    style="display: inline-block"
                                                    @click="fetchCode"
                                                    :disabled="!isStop"
                                            >{{sendCodeMsg}}
                                            </a-button>
                                        </a-form-item>

                                        <a-form-item>
                                            <a-button type="link" @click="forgetPass"
                                            >忘记密码
                                            </a-button>

                                            <a-button
                                                    type="primary"
                                                    html-type="submit"
                                                    class="login-form-button"
                                            >登录
                                            </a-button>
                                        </a-form-item>
                                    </a-form>
                                </a-tab-pane>

                                <!-- 账号登录结束 -->
                            </a-tabs>
                        </a-tab-pane>
                        <!--企业登录-->
                        <a-tab-pane tab="企业登录" key="login-company">
                            <a-form
                                    :form="formCompanyLogin"
                                    class="login-form"
                                    @submit="submitCompanyLogin"
                            >
                                <a-form-item>
                                    <a-input
                                            v-decorator="[
                          'account',
                          {
                            rules: [
                              { required: true, message: '请输入您的邮箱!' }
                            ]
                          }
                        ]"
                                            placeholder="邮箱"
                                    >
                                        <a-icon
                                                slot="prefix"
                                                type="user"
                                                style="color: rgba(0,0,0,.25)"
                                        />
                                    </a-input>
                                </a-form-item>
                                <a-form-item>
                                    <a-input
                                            v-decorator="[
                          'password',
                          {
                            rules: [
                              { required: true, message: '请输入您的密码!' }
                            ]
                          }
                        ]"
                                            type="password"
                                            placeholder="密码"
                                    >
                                        <a-icon
                                                slot="prefix"
                                                type="lock"
                                                style="color: rgba(0,0,0,.25)"
                                        />
                                    </a-input>
                                </a-form-item>

                                <a-form-item>
                                    <a-input
                                            v-decorator="[
                          'code',
                          {
                            rules: [
                              { required: true, message: '请输入验证码!' }
                            ]
                          }
                        ]"
                                            type="text"
                                            placeholder="验证码"
                                    >
                                        <a-icon
                                                slot="prefix"
                                                type="lock"
                                                style="color: rgba(0,0,0,.25)"
                                        />
                                    </a-input>
                                    <div style="text-align:center">
                                        <img :src="imageSrc" alt="验证码" style=" margin-top:13px"
                                             onclick="this.src=this.src+'?'+new Date()*1"/>
                                    </div>
                                </a-form-item>
                                <a-form-item style="text-align: center">
                                    <a-button type="link" @click="forgetPass"
                                    >忘记密码
                                    </a-button>
                                    <a href="/company-register"
                                    >没有账号？点击注册</a>
                                    <div>
                                        <a-button
                                                style="width: 200px"
                                                type="primary"
                                                html-type="submit"
                                                class="login-form-button"
                                        >登录
                                        </a-button>
                                    </div>

                                </a-form-item>
                            </a-form>
                            <!-- 账号登录结束 -->
                        </a-tab-pane>
                    </a-tabs>
                    <!-- 顶部tabs结束 -->
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import loginApi from "@/api/login";
    import {initMenu} from "../../utils/menus";
    import {getLocalStorageJson, removeLocalStorageJson, setLocalStorageJson} from "../../utils/auth";
    import cartApi from "../../api/goods/cartApi";

    export default {
        data() {
            return {
                imageSrc: "http://127.0.0.1:10110/auth/image-code",
                activeKey: "login-member", //当前激活tab
                confirmDirty: false,
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8}
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16}
                    }
                },
                sendCodeMsg: "获取验证码", //发送验证码按钮文字
                code: "", //验证码
                isStop: true, //是否倒计时结束

            };
        },
        beforeCreate() {
            //会员密码登录form
            this.formLoginMember = this.$form.createForm(this);
            //会员手机短信登录from
            this.formLoginMobile = this.$form.createForm(this);
            //企业登录form
            this.formCompanyLogin = this.$form.createForm(this);
        },
        mounted() {
            this.imageSrc=this.imageSrc+"?"+new Date()
        },

        methods: {
            forgetPass() {
                this.$message.warning("请联系管理员修改密码", 2);
            },
            /**
             * 企业邮箱登录
             */
            submitCompanyLogin(e) {
                e.preventDefault();
                this.formCompanyLogin.validateFields((err, fieldsValue) => {
                    if (!err) {
                        let data = {
                            "loginData": fieldsValue,
                            "type": "company",
                        }
                        this.$store
                            .dispatch("PwdLogin", data)
                            .then(resp => {
                                if (resp.flag) {
                                    //获取用户信息
                                    this.$store.dispatch("GetUserInfo").then(resp => {
                                        if (resp.flag) {
                                            this.$router.push("/shop_apply_result");
                                        }
                                    });
                                } else {
                                    this.imageSrc=this.imageSrc+"?"+new Date()

                                    this.$message.error(resp.message, 2);
                                }
                            })
                            .catch(error => {
                            });
                    }
                });
            },
            /**
             * 手机短信登录
             */
            submitMobileLogin(e) {
                e.preventDefault();
                this.formLoginMobile.validateFields((err, fieldsValue) => {
                    if (!err) {
                        let data = {
                            "loginData": fieldsValue,
                            "type": "member",
                        }
                        console.log(data)
                        this.$store
                            .dispatch("MobileLogin", data)
                            .then(resp => {
                                if (resp.flag) {
                                    //获取用户信息
                                    this.$store.dispatch("GetUserInfo").then(resp => {
                                        if (resp.flag) {
                                            this.mergeShoppingCart()
                                            this.$router.push("/");
                                        }
                                    });
                                } else {
                                    this.imageSrc=this.imageSrc+"?"+new Date()

                                    this.$message.error(resp.message, 2);
                                }
                            })
                            .catch(error => {
                            });
                    }
                });
            },
            /**
             * 账号登陆提交
             */
            submitPwdLogin(e) {
                e.preventDefault();
                this.formLoginMember.validateFields((err, fieldsValue) => {
                    if (!err) {
                        console.log(fieldsValue)
                        let data = {
                            "loginData": fieldsValue,
                            "type": "member",
                        }
                        this.$store
                            .dispatch("PwdLogin", data)
                            .then(resp => {
                                if (resp.flag) {
                                    //获取用户信息
                                    this.$store.dispatch("GetUserInfo").then(resp => {
                                        if (resp.flag) {
                                            this.mergeShoppingCart()
                                            this.$router.push("/");
                                        }
                                    });
                                } else {
                                    this.imageSrc=this.imageSrc+"?"+new Date()

                                    this.$message.error(resp.message, 2);
                                }
                            })
                            .catch(error => {
                            });
                    }
                });
            },
            mergeShoppingCart() {
                let cartList = getLocalStorageJson("mm_cart");
                if (cartList && cartList.length > 0) {
                    cartList.forEach(car => {
                        car.selectedParam = JSON.stringify(car.selectedParam)
                    })
                    cartApi.mergeCart(cartList).then(resp => {
                        if (resp.data.flag) {
                            let code = resp.data.code;
                            switch (code) {
                                case 200:
                                    removeLocalStorageJson("mm_cart")
                                    break;
                                case  4006:
                                    //参数出错，人工检查处理
                                    break;
                                case 4007:
                                    //存在失败数据，将成功的数据移除，离线数据保留失败数据
                                    let failSkuIds = resp.data.data;
                                    if (failSkuIds && failSkuIds.length > 0) {
                                        let newList = []
                                        cartList.forEach(old => {
                                            if (failSkuIds.includes(old.skuId + '')) {
                                                newList.push(old)
                                            }
                                        })
                                        setLocalStorageJson("mm_cart", newList)
                                        console.log("合并失败数据:" + newList)
                                    }
                                    break;
                                default:
                                    break;
                            }

                        }
                    })
                }

            },
            /**
             * 获取验证码
             */
            fetchCode() {
                let mobile = this.formLoginMobile.getFieldValue("account");
                if (!mobile) {
                    this.$message.warning("请填写手机号")
                    return;
                }
                let seconds = 10;
                this.isStop = false;

                let that = this; //在setInterval中，this不是vue实例，需要使用that转一下

                loginApi.fetchCheckCode(mobile).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message, 1);
                        let id = setInterval(function () {

                            that.sendCodeMsg = seconds + "秒后可再次获取";
                            if (seconds === 0) {
                                clearInterval(id);
                                that.sendCodeMsg = "点击获取验证码";
                                console.log(that.sendCodeMsg)
                                that.isStop = true;
                            }

                            seconds--;
                        }, 1000);
                    } else {
                        that.sendCodeMsg = "点击获取验证码";
                        that.isStop = true;
                    }
                });
            },
            /**
             * 注册时验证码离焦事件
             */
            handleCodeBlur(e) {
                this.code = e.target.value;
            },
        }
    };
</script>
<style scoped>
    #card {
        margin-top: 20px;
        margin-right: 40px;
        min-height: 500px;
    }

    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }

    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }

    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
</style>
